<script setup lang="tsx">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { GetCheckResultsApi } from '@/api/assessment'
import { getTreeDepartmentsApi } from '@/api/department'
import { ref, unref, reactive } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { Search } from '@/components/Search'
import { BaseButton } from '@/components/Button'

import { Form, FormSchema } from '@/components/Form'

import { useRoute, useRouter } from 'vue-router'
const { push } = useRouter()
const route = useRoute()
const { t } = useI18n()

const searchParams = ref({})

const columns: TableColumn[] = [
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  {
    field: 'assessmentType',
    label: '抽查类型'
  },
  {
    field: 'assessmentCount',
    label: '抽查数量'
  },
  {
    field: 'depName',
    label: t('userDemo.department')
  },
  {
    field: 'totalScore',
    label: '总分'
  },
  {
    field: 'avgScore',
    label: '平均分'
  },
  {
    field: 'assessmentContent',
    label: '考核内容'
  },
  {
    field: 'remark',
    label: '备注'
  },
  {
    field: 'action',
    label: t('userDemo.action'),
    width: 100,
    align: 'center',
    fixed: 'right',
    slots: {
      default: (data: any) => {
        return (
          <>
            <BaseButton type="primary" onClick={() => look(data.row)}>
              {t('exampleDemo.detail')}
            </BaseButton>
          </>
        )
      }
    }
  }
]
const look = (row) => {
  push({ path: '/assessment/assessment', query: { assessmentGuid: row.guid } })
}

const delLoading = ref(false)
const ids = ref<string[]>([])
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await GetCheckResultsApi({
      pageNo: unref(currentPage),
      pageRow: unref(pageSize),
      pageModel: { ...unref(searchParams) }
    })
    return {
      list: res.data.pageModels || [],
      total: res.data.totalCount || 0
    }
  }
  //   fetchDelApi: async () => {
  //     const res = await deleteFiles(unref(ids))
  //     return !!res
  //   }
})

const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList, getElTableExpose, delList } = tableMethods

const setSearchParams = (params: any) => {
  if (params.date) {
    params.startTime = params.date[0]
    params.endTime = params.date[1]
    delete params.date
  }
  searchParams.value = params
  getList()
}

const departmentList = ref([])
const fetchDepartment = async () => {
  const res = await getTreeDepartmentsApi({})
  departmentList.value = res.data
}
fetchDepartment()
const searchSchema = reactive<FormSchema[]>([
  {
    field: 'depGuid',
    label: t('userDemo.department'),
    component: 'TreeSelect',
    componentProps: {
      nodeKey: 'guid',
      props: {
        label: 'depName',
        value: 'guid',
        children: 'children'
      },
      placeholder: '请选择部门',
      highlightCurrent: true,
      expandOnClickNode: false,
      checkStrictly: true,
      checkOnClickNode: true,
      clearable: true,
      defaultExpandAll: true
    },
    optionApi: async () => {
      return departmentList.value || []
    }
  },
  {
    field: 'assessmentType',
    label: '抽查类型',
    component: 'Select',
    componentProps: {
      clearable: true,
      placeholder: '请选择'
    },
    optionApi: () => {
      return [
        { label: '定向抽查', value: '定向抽查' },
        { label: '随机抽查', value: '随机抽查' }
      ]
    }
  },
  {
    field: 'date',
    label: t('problem.time'),
    component: 'DatePicker',
    componentProps: {
      style: { width: '340px' },
      type: 'datetimerange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      StartPlaceholder: 'Start date',
      EndPlaceholder: 'End date'
    }
  }
])
</script>

<template>
  <ContentDetailWrap>
    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :reserveIndex="true"
      :columns="columns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
  </ContentDetailWrap>
</template>
<style scoped>
/* :deep(.dplayer-menu) {
  display: none !important;
} */

.row_d {
  display: flex;
  /* align-items: center; */
}
.rombox {
  width: 500px;
  margin-left: 20px;
}
.downstyle {
  margin-right: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: 0.1s;
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  background-color: #529b2e;
  border: var(--el-border);
  border-color: #529b2e;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
}
</style>
